<template>
	<view class="main">
		<!-- 月消费 -->
		<view class="box">
			<u-row customStyle="margin-bottom: 10px">
				<u-col span="6">
					本月支出
				</u-col>
				<u-col span="6">
					<view class="ht_row_right" @click="pickerShow = true">
						<u-icon name="arrow-down" color="#2979ff" size="15"></u-icon>
						<text>{{month}}月</text>
					</view>
					<view class="year">{{year}}</view>
				</u-col>
			</u-row>

			<u-row>
				<u-col span="6">
					<view class="ht_row money_box" v-if="showMoney">
						<text>￥</text><text style="font-size:40rpx;margin-right: 10rpx;">{{monthPay}}</text>
						<u-icon name="eye-off" color="#000000" size="20" @click="showMoney=false"></u-icon>
					</view>
					<view class="ht_row money_box" v-else>
						<text>￥</text><text style="font-size:40rpx;margin-right: 10rpx;">********</text>
						<u-icon name="eye-fill" color="#000000" size="20" @click="showMoney=true"></u-icon>
					</view>
					
				</u-col>
				<u-col span="6"></u-col>
			</u-row>
		</view>
		<u-datetime-picker :formatter="formatter" :show="pickerShow" v-model="pickerTime" mode="year-month"
			@close="pickerShow = false" @confirm="pickerShow = false"></u-datetime-picker>
	</view>
</template>

<script>
	import {mapMutations} from 'vuex'
	export default {
		name:"monthlyExpense",
		data() {
			return {
				//是否显示消费金额
				showMoney:true,
				//月份选择器显示
				pickerShow: false,
				//picker选中时间
				pickerTime: Number(new Date()),
				//当前年
				year: 1997,
				//当前月份
				month: 1,
				//月支付
				monthPay:0,
			}
		},
		watch: {
			//监听时间框选中
			pickerTime(newName, oldName) {
				let date=new Date(newName);
				this.year=date.getFullYear();
				this.month=date.getMonth()+1;
				this.setYearMonth({
					year:this.year,
					month:this.month,
				})
			},

			'$store.state.yearMonth': {
				deep: true,
				handler: function (newValue, oldValue) {
					//重新计算本月消费
					this.getMonthConsumption();
				}
			},
		},
		created() {
			this.init();
		},

		methods: {
			...mapMutations(['setYearMonth']),
			//年月日选择器格式化
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				return value
			},



			//刷新表格
			refresh(){
				this.getMonthConsumption();
			},

			//初始化
			init() {
				//获取当前月份
				let date = new Date();
				this.month = date.getMonth() + 1;
				this.year = date.getFullYear();
				this.setYearMonth({
					year:this.year,
					month:this.month,
				})
			},


			//获取本月消费
			getMonthConsumption(){
				let yearMonth=this.$store.state.yearMonth;
				this.$request("/bill-record/getMonthConsumption/"+yearMonth.year+"/"+yearMonth.month).then(res=>{
					this.monthPay=res;
				})
			},
		}
	}
</script>

<style lang="scss">
	.main {
		width: 100%;
		padding: 20rpx;
		box-sizing: border-box;
		.box {
			width: 100%;
			padding: 25rpx;
			box-sizing: border-box;
			border-radius: 10rpx;
			background: #ffff00;
			.year {
				width: 95%;
				text-align: right;
				font-size: 25rpx;
				letter-spacing: 3rpx;
			}
		}
	}
</style>
